<html>
 <body>
  <table cellpadding="0" cellspacing="0"
         style="margin: 10px;
                padding: 8px;
                background: url(/{{ region.tile_base }}/{{ region.default_tile.image }}.png)">

    {% for row in region.rows %}
    <tr>
      {% if forloop.first %}
        {% for tile in row %}
          <td align="right">{{ forloop.counter0 }}</td>
        {% endfor %}
      {% endif %}

      {% for tile in row %}
        {% if forloop.first and not forloop.parentloop.first %}
          <td>{{ forloop.parentloop.counter0 }}</td>
        {% endif %}

        <td style="width: 64px;
                   height: 64px;
                   background: url(/{{ region.tile_base }}/{{ tile.image }}.png)"
                   align="center" />

        {% for sprite in tile.occupants %}
          {% if sprite.visible and sprite.image %}
            <img src="/{{ region.sprite_base }}/{{ sprite.image }}.png"
             {% if sprite.selected %}style="border: 2px solid yellow"{% endif %}>
          {% endif %}
        {% endfor %}
      {% endfor %}

    </tr>
    {% endfor %}
  </table>
 </body>
</html>
